<!--
 * @Author: daidai
 * @Date: 2022-02-20 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div v-if="pageflag" class="chart-container">
    <div class="list" style="margin-top: 0">
      <div class="list-header">
        <div class="first">区县</div>
        <div class="second">企业数量</div>
        <div class="last">运费总额</div>
      </div>
      <div class="list-body">
        <vue-seamless-scroll :data="tableData" :class-option="defaultOption">
          <div class="list-item" v-for="(item, index) in tableData" :key="index" @click="chooseItem(index)">
            <div class="first">
              <span class="span-text">{{ item.waybillname }}</span>
            </div>
            <div class="second">{{ item.waybillNum }}</div>
            <div class="last">{{ item.waybillCompleteNum }}</div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  computed: {
    defaultOption() {
      return this.$store.state.setting.defaultOption;
    },
  },
  data() {
    return {
      options: {},
      tableData: [
        {
          waybillname: "兰山区",
          waybillNum: 136,
          waybillCompleteNum: "709万",
          waybillDeepNum: 3679,
        },
        {
          waybillname: "河东区",
          waybillNum: 54,
          waybillCompleteNum: "289万",
          waybillDeepNum: 3679,
        },
        {
          waybillname: "罗庄区",
          waybillNum: 34,
          waybillCompleteNum: "320万",
          waybillDeepNum: 3679,
        },
        {
          waybillname: "临沭县",
          waybillNum: 26,
          waybillCompleteNum: "499万",
          waybillDeepNum: 3679,
        },
        {
          waybillname: "郯城县",
          waybillNum: 26,
          waybillCompleteNum: "38万",
          waybillDeepNum: 3679,
        },
        {
          waybillname: "沂水县",
          waybillNum: 25,
          waybillCompleteNum: "169万",
          waybillDeepNum: 3679,
        },
        {
          waybillname: "莒南县",
          waybillNum: 24,
          waybillCompleteNum: "673万",
          waybillDeepNum: 3679,
        }
      ],
      pageflag: true,
      timer: null,
      chooseIndex: 1,
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    chooseItem(index) {
      this.chooseIndex = index;
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      // /tran/bigScreen/queryVehicleInfo
      var vm = this;
      var params = {
        queryValue: vm.queryValue,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.chart-container {
  position: relative;
  display: flex;
  justify-content: center;
  // width: 600px;
  height: 100%;

  .el-table {
    background: none;

    tr {
      background: none;
    }
  }

  .box {
    position: absolute;
    top: 16px;
    left: 10px;
    width: 400px;
    height: 70px;
    z-index: 0;
    // border: 1px solid red;
    display: flex;
    justify-content: space-between;

    .box-info {
      // border: 1px solid red;
      width: 100px;
      // line-height: 78px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      // padding-left: 50px;

      background: url("../../../assets/img/launch/home/rcc_bg.png") no-repeat center;
      // background-size: cover;
      background-size: 80% 80%;

      .light {
        margin-top: -10px;
        margin-bottom: 10px;
        // padding-left: 10px;
        color: #ffb507;
        font-size: 20px;
        font-weight: 600;
        // font-family: 'YouSheBiaoTiHei';
      }
    }
  }

  .left_center_inner,
  .bg {
    // margin-left: -50px;
    margin-top: 10px;
    width: 100%;
    height: 100%;
  }

  .left_center_inner {
    position: absolute;
    top: 5px;
    left: -166px;
    // width: calc(100% + 100px);
    z-index: 1;
  }

  .bg {
    position: absolute;
    bottom: 2px;
    left: 22%;
    // z-index: -1;
    width: 270px;
    height: 185px;
    background: no-repeat center;
    background-image: url("../../../assets/img/launch/pie_bg1.png");
    background-size: 100% 100%;
    transform: translateX(-50%);
  }

  .list {
    width: 100%;

    // margin:18px 23px;
    .list-header {
      width: calc(100% - 2px);
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 26px;
      line-height: 26px;
      // background: linear-gradient(to top, #14569a 0%, #022549 100%);

      // border: 1px solid #4390de;
      border: 1px solid #153c81;
      background: #03162c;

      div {
        width: 23%;
        text-align: center;
      }

      .first {
        width: 30%;
      }
    }

    .list-body {
      // border: 1px solid red;
      width: 100%;
      height: 130px;
      overflow: hidden;
    }

    .list-item {
      width: calc(100% - 2px);
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #03162c;
      border-bottom: 1px solid #153c81;
      border-left: 1px solid #153c81;
      border-right: 1px solid #153c81;
      height: 26px;
      line-height: 26px;
      color: #fff;
      cursor: pointer;
      // margin-top: 10px;

      div {
        cursor: pointer;
        width: 23%;
        text-align: center;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .first {
        width: 30%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        // margin-left: 10px;
        .sapn-icon {
          width: 24px;
          height: 24px;
          background: url("../../../assets/img/launch/internet/icon.png") no-repeat center;
          background-size: 24px 24px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .span-text {
          margin-left: 9px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .deep_color {
      background: url("../../../assets/img/launch/internet/lineBg.png") no-repeat top center;
      background-size: 100% 26px;
      color: #07d3ff;
      // border: none;
    }
  }
}
</style>

<!-- <style lang="scss" scoped>
/deep/ .el-table, .el-table__expanded-cell{
  background-color: #000c3e;
  color: #fff;
}
/deep/ .el-table th, .el-table tr{
  background-color: #000c3e;
  color: #fff;
}
/deep/ .el-table td{
  border-bottom: 1px solid #EBEEF5;
}
  .spanHover{
  cursor: pointer;
}
.submit{
  cursor: pointer;
}
</style> -->
